<template>
	<div class="page">
		<c-title :hide="false" text="预约"></c-title>
		<!-- <div class="img">
			<img :src="data.avator" alt="">
		</div> -->
		<div class="title">
			日期挂号
		</div>
		<div class="bigbox">
			<div class="listbox">
				<div class="list" :class="item.cli ==0?'':'listcli'" v-for="(item,index) in list" :key="index"
					@click="selectgh(item,index)">
					<div class="xq">
						{{item.week}}
					</div>
					<div class="time">
						{{item.time}}
					</div>
					<div class="hao_nums" :class="item.hao_nums ==0?'cf':'cb'">
						{{item.hao_nums ==0?'无号':'有号'}}
					</div>


				</div>



			</div>
		</div>


		<div class="hy" v-if="shangwu.length !==0 || xiawu.length !==0">
			<van-field readonly label-class='labelclass' @click="jzrclick" v-model="jzr" label="就诊人" placeholder="请选择就诊人" />
			<van-field  v-model="ms" label="病情描述" placeholder="请输入病情描述" />
			<div class="swhy" v-if="shangwu.length !==0">
				<div class="hytitle">
					上午号源
				</div>
				<div class="ysbox">
					
					<div class="yslist" v-for="(i,ind) in shangwu" :key="ind">
						<div class="l">
							<div class="lt">
								<div class="name">
									{{data.name}}
								</div>
								<div class="phone">
									{{data.phone}}
								</div>
							</div>
							<div class="lb">
								{{data.info}}
							</div>
						</div>
						<div class="m">

						</div>
						<div class="r">
							<div class="sybox" @click="submit(i,ind)">
								<div class="sy">
									剩余
								</div>
								<div class="num">
									{{i.num}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="swhy" v-if="xiawu.length !==0">
				<div class="hytitle">
					下午号源
				</div>
				<div class="ysbox">
					<div class="yslist" v-for="(i,ind) in xiawu" :key="ind">
						<div class="l">
							<div class="lt">
								<div class="name">
									{{data.name}}
								</div>
								<div class="phone">
									{{data.phone}}
								</div>
							</div>
							<div class="lb">
								{{data.info}}
							</div>
						</div>
						<div class="m">

						</div>
						<div class="r">
							<div class="sybox" @click="submit(i,ind)">
								<div class="sy">
									剩余
								</div>
								<div class="num">
									{{i.num}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

<div class="jzr">
			<!-- <van-cell-group inset> -->
		
			<!-- </van-cell-group> -->
		</div>
		</div>

		<div class="null" v-else>
			当天已无号，请查看其他日期号源
		</div>

		
		<!-- 	<div class="content">
			<div class="name item">
				<div class="l">医师名称：</div>
				<div class="r">{{data.name}}</div>
			</div>
			<div class="mobile item">
				<div class="l">医师电话：</div>
				<div class="r">{{data.phone}}</div>
			</div>
			<div class="jj item">
				<div class="l">医师简介：</div>
				<div class="r">{{data.info}}</div>
			</div>
			<div class="dz item">
				<div class="l">医院地址：</div>
				<div class="r">{{data.address}}</div>
			</div>
		</div> -->





		<!-- <div class="button" @click="submit" v-if="shangwu.length !==0 || xiawu.length !==0">
			预约
		</div> -->

		<van-popup v-model:show="show" position="center" style="width: 90%;">
			<div class="yybox">
				<div class="title">
					就诊人信息填写
				</div>


				<van-cell-group inset>
					<!-- 输入任意文本 -->
					<van-field v-model="name" label="就诊人" @click="show1 = true" />
					<!-- 输入手机号，调起手机号键盘 -->
					<!-- <van-field v-model="id_card" label="有效证件" /> -->
					<!-- 允许输入正整数，调起纯数字键盘 -->
					<!-- <van-field v-model="phone" type="tel" label="手机号" /> -->
					<!-- 允许输入数字，调起带符号的纯数字键盘 -->
					<van-field v-model="time" label="就诊时间" @click="show2 = true" />
					<!-- 输入密码 -->
					<van-field v-model="ms" type="textarea" label="病情描述" />
				</van-cell-group>
				<div class="bottom" @click="submit">
					确定

				</div>
			</div>


		</van-popup>



		<van-popup v-model:show="show1" position="bottom">
			<van-picker title="选择就诊人" :columns="columns" @confirm="onConfirm" @cancel="show1 = false" value-key="name"
				show-toolbar />


		</van-popup>


		<van-popup v-model:show="show2" position="bottom">


			<van-datetime-picker v-model="currentDate" type="datetime" title="选择就医时间" :min-date="minDate"
				:max-date="maxDate" @cancel='show2 =false' @confirm='selecttime' />
		</van-popup>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	export default {
		data() {
			return {
				jzr: '',
				currentDate: new Date(),
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				columns: [],
				ids: '',
				data: {},
				show: false,
				show1: false,
				show2: false,
				name: '',
				phone: '',
				id_card: '',
				patient_id: '',
				visit_time: '',
				time: '',
				ms: '',
				list: [],
				shangwu: [],
				xiawu: []
			}
		},
		activated() {
			this.getlist()
			this.ids = this.$route.query.ids
			this.getdatas()
			this.getdata()
			// this.jzrlist()

			console.log(this.$route.query)
		},
		methods: {
			jzrclick(){
				if(this.columns.length ==0){
					Toast('当前暂无就诊人，请去我的就诊人管理添加！')
					return
				}
				this.show1 = true
			},
			// jzrlist() {
			// 	$http
			// 		.post("plugin.hft-hospital.api.index.patient_list", {

			// 		})
			// 		.then(response => {
			// 			console.log(response)
			// 			if (response.result === 1) {
			// 				// this.data = response.data
			// 			} else {
			// 				Toast(response.msg);
			// 			}
			// 		})
			// 		.catch(error => {
			// 			console.log(error);
			// 		});

			// },
			getdatas() {
				$http
					.post("plugin.hft-hospital.api.index.doctor_info", {
						doctor_id: this.ids

					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							this.data = response.data
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			selectgh(item, index) {
				this.list.forEach(i => {
					i.cli = 0
				})
				item.cli = 1
				this.shangwu = item.shangwu
				this.xiawu = item.xiawu
			},
			getdata() {
				$http
					.post("plugin.hft-hospital.api.index.get-appointment-time", {
						doctor_id: this.ids
					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							this.list = response.data
							this.list.forEach(item => {
								this.$set(item, 'cli', 0)
							})
							this.list[0].cli = 1
							this.shangwu = response.data[0].shangwu
							this.xiawu = response.data[0].xiawu
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});

			},
			//日期转化
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + "-";
				let M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-";
				let D = this.change(date.getDate()) + " ";
				let h = this.change(date.getHours()) + ":";
				let m = this.change(date.getMinutes());
				// let s = this.change(date.getSeconds());
				return Y + M + D + h + m;
			},
			change(t) {
				if (t < 10) {
					return "0" + t;
				} else {
					return t;
				}
			},
			selecttime(e) {
				this.visit_time = e.getTime()
				this.time = this.timestampToTime(e.getTime())
				this.show2 = false
				console.log(this.visit_time)
			},
			getlist() {
				$http
					.post("plugin.hft-hospital.api.index.patient_list", {

					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							this.columns = response.data.data
							console.log(this.list)
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			onConfirm(e) {
				this.jzr = e.name
				this.patient_id = e.id
				this.show1 = false
				console.log(e)
			},
			init() {
				// this.show = false
				this.jzr = ''
				this.ms = ''
			},
			submit(i,ind) {
				console.log(i,ind)
				$http
					.post("plugin.hft-hospital.api.index.sub_order", {
						doctor_id: this.ids,
						patient_id: this.patient_id,
						visit_time_id: i.id,
						description: this.ms
					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							Toast(response.msg)
						this.getdatas()
						this.getdata()
						this.init()
						this.$router.push(this.fun.getUrl("myyygh"));
						} else {
							Toast(response.msg);
							this.init()
						}
					})
					.catch(error => {
						console.log(error);
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	.yybox {
		padding: 0.5rem;

		.bottom {
			background-color: #EB5648;
			color: #fff;
			margin-top: 1rem;
			line-height: 2.5rem;
		}

		.title {
			font-size: 1rem;
			margin-bottom: 1rem;
		}

		.qd {
			background-color: #EB5648;
			color: #fff;
			line-height: 2.5rem;
			margin-top: 1rem;
		}
	}

	.page {
		background-color: #fff;

		.button {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #4684FD;
			color: #fff;
			text-align: center;
			line-height: 3rem;
			font-size: 1rem;
		}

		.title {
			margin-bottom: 1rem;
			color: #508AE9;
			width: 100%;
		}

		.null {
			padding: 2rem 0;
			color: #9B9B9B;
		}

		.hy {
		
			
			.swhy {
				margin-bottom: 1rem;
			}

			.ysbox {
				padding: 1rem;

				.yslist {
					display: flex;
					justify-content: space-between;

					.r {
						.sybox {
							background-color: #4684FD;
							font-size: 1rem;
							color: #fff;
							padding: 0.5rem 0.8rem;
							border-radius: 0.3rem;

							.sy {}
						}
					}

					.l {
						.lb {
							margin-top: 1rem;
							color: #9A9A9A;
						}

						.lt {
							display: flex;

							.phone {
								margin-left: 1rem;
								border-left: 0.01rem solid #D8D8D8;
								padding-left: 1rem;
								line-height: 1rem;
								height: 1rem;
							}

							.name {
								font-size: 1.3rem;
								font-weight: 600;
								line-height: 1rem;
							}
						}
					}
				}
			}

			.hytitle {

				background-color: #F6F6F6;
				color: #525252;
				width: 100%;
				padding: 1rem;
				text-align: left;
				font-size: 1rem;
			}
		}

		.bigbox {

			.listbox {
				padding: 0.5rem;
				// justify-content: space-around;
				width: 100%;
				background-color: #fff;
				width: 100%;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;

				.listcli {
					background-color: #F6F6F6;
					// color: #0f0;
				}

				.list {
					padding: 0.5rem;
					display: inline-block;
					width: 5rem;

					.time {
						margin: 0.3rem 0;
					}

					.cf {
						background-color: #DDDDDD;
						color: #fff;
					}

					.cb {
						color: #fff;
						background-color: #4684FF;
					}

					.hao_nums {
						width: 100%;
						border-radius: 0.5rem;
					}
				}
			}
		}

		.content {
			background-color: #fff;
			padding: 0.8rem;

			.jj {
				margin: 1rem 0;
			}

			.item {
				display: flex;
				font-size: 1rem;
				margin-bottom: 0.5rem;
				text-align: left;

				.l {
					font-weight: 600;
				}

				.r {
					width: 75%;
				}
			}
		}

		.img {
			img {
				width: 100%;
			}
		}
	}
</style>
